<template>
  <!-- 人员类型新增 -->
  <el-dialog v-dialogDrag :title="dialogTitle" :close-on-click-modal="false" class="dialogStyleSmall" :visible.sync="dialogVisible">
    <el-form ref="form" :model="formData" label-width="120px" :rules="rules">
      <el-form-item label="包含本企业" prop="enterpStatus">
        <el-radio-group v-model="formData.enterpStatus">
          <el-radio label="0">是</el-radio>
          <el-radio label="1">否</el-radio>
          <!-- <el-radio label="2">非本企业</el-radio> -->
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item v-if="!onlyUnit" key="1" label="配置单位类型" prop="enterpTypeNum">
        <el-checkbox-group v-model="formData.enterpTypeNum" :disabled="onlyUnit" @change="handleChange">
          <el-checkbox v-for="(i,ind) in enterpriseTypeList" :key="ind" :label="i.typeNum">{{ i.typeName }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item> -->
      <el-form-item v-if="onlyUnit" key="2" label="配置单位类型">
        <el-checkbox-group v-model="formData.enterpTypeNum">
          <el-checkbox v-for="(i,ind) in enterpriseTypeList" :key="ind" :label="i.typeNum">{{ i.typeName }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="cancel">取 消</el-button>
      <el-button size="medium" :disabled="btnDisabled" type="primary" @click="submitForm">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { listNoPermission } from '@/api/superviseBaseInfo/typeManage/organizationType'
import { saveOrgnazitionType, editOrgnazitionType, getOrgnazitionType } from '@/api/superviseBaseInfo/typeManage/organizationType'

export default {
  name: 'DetailDialog',
  components: {},
  data() {
    const checkPower = (rule, value, callback) => {
      if (value.length) {
        callback()
      } else {
        callback(new Error('至少选择一个单位类型!'))
      }
    }
    return {
      /* 新增 start */
      onlyUnit: true, // 是否为仅本企业
      btnDisabled: false,
      dialogTitle: '', // 对话框标题
      dialogVisible: false, // 对话框是否弹出显示
      formData: {
        id: '', // 人员/设备类型id
        typeNum: '', //	人员/设备类型编号
        kind:	'1', // 类别（0人员,1是设备）
        enterpStatus: '0', //	本企业（0仅本企业,1包含本企业,2不包含本企业）
        enterpTypeNum: [],
        isEdit: false
      },
      enterpriseTypeList: [], // 单位类型
      // from表单校验
      rules: {
        enterpStatus: [{ required: true, message: '请选择是否为本企业', validate: checkPower, trigger: 'change' }],
        enterpTypeNum: [{ type: 'array', required: true, message: '至少选择一个单位类型', validate: checkPower, trigger: 'change' }]
      }
      /* 新增 end */
    }
  },
  mounted() {
    this.getEnterpriseType()
  },
  methods: {
    // 获取单位类型
    async getEnterpriseType() {
      const { data: { rows }} = await listNoPermission()
      this.enterpriseTypeList = rows
    },
    // 配置单位类型
    handleAdd(title, params, id) {
      this.dialogVisible = true
      this.dialogTitle = title
      this.formData.id = id
      this.formData.typeNum = params.typeNum
      this.getDetailById(id)
    },
    async getDetailById(id) {
      const { data } = await getOrgnazitionType(id)
      if (data) {
        let enterpTypeNum = []
        if (data.enterpTypeNum) {
          enterpTypeNum = data.enterpTypeNum.trim().split(',')
        }
        // this.onlyUnit = data.enterpStatus === '0'
        this.formData = { ...data, enterpTypeNum, isEdit: true }
      }
    },
    // 选择单位类型
    handleChange(e) {
      console.log(e)
      // this.CheckBusinessData.forEach(item => {
      //   item.forEach(businessId => {
      //     this.businessData.businessScopeJson.push({ businessId })
      //   })
      // })
    },
    ourCompanyChange(e) {
      if (e === '0') {
        this.onlyUnit = true
        this.formData.enterpTypeNum = []
      } else {
        this.onlyUnit = false
      }
    },
    // 保存
    submitForm() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          this.btnDisabled = true
          let enterpTypeNum = ''
          if (this.formData.enterpTypeNum.length) {
            enterpTypeNum = this.formData.enterpTypeNum.join(',')
          }
          if (this.formData.isEdit) {
            // 修改
            await editOrgnazitionType({ ...this.formData, enterpTypeNum })
            this.msgSuccess('修改成功')
          } else {
            // 新增
            await saveOrgnazitionType({ ...this.formData, enterpTypeNum })
            this.msgSuccess('保存成功')
          }
          this.cancel()
          this.$parent.getList()
        }
      })
    },
    // 弹框取消按钮
    cancel() {
      this.dialogVisible = false
      this.btnDisabled = false
      this.emptyForm()
    },
    // 清空弹出
    emptyForm() {
      this.resetForm('form')
      this.formData.id = ''
      this.formData.typeNum = ''
      this.formData.isEdit = false
      this.onlyUnit = true
      this.formData.enterpTypeNum = []
    }
  }
}
</script>

